<template>
    <div>
        <el-dialog :title="isedit ? '修改轮播图信息' : '添加轮播图信息'" :visible.sync="isshow" center :before-close="esc">
            <el-form :model="form" :rules="rules" ref="formName">

                <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片" :label-width="formLabelWidth">

                    <el-upload :file-list="fileList" :auto-upload="false" action="#" list-type="picture-card"
                        :on-change="changeFile" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>

                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="esc">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { banneradd, banneredit, bannerinfo } from '../../request/app'
export default {
    props: ['isshow', 'isedit'],
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
            // isshow:true,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                title: '',
                img: '',
                status: ''
            },
            rules: {
                title: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],
            },
            formLabelWidth: '120px',

        };
    },
    computed: {
        ...mapGetters({
            getlist: 'tobanner/getlist',
        })
    },
    mounted() {
    },
    methods: {
        ...mapActions({
            // ACsetlist: 'setmange/ACsetlist',
            // ACgetlistpeo:'setpeople/ACgetlistpeo'
            ACsetlist: 'tobanner/ACsetlist'
        }),
        esc() {
            // console.log(e);
            this.$emit('isshow', false)
            this.resize()
        },
        sure(e) {
            // console.log(e);
            console.log(this.form);

            this.$refs.formName.validate((e) => {
                console.log('11111111111');

                if (e) {
                    if (this.isedit) {
                        // 修改事件
                        // console.log(1111111111, 'edit');
                        banneredit(this.form)
                            .then(res => {
                                console.log(res); 
                                this.esc()
                                this.ACsetlist()
                            })

                        console.log(this.getlist);

                    } else {
                        // 添加事件
                        banneradd(this.form)
                            .then(res => {
                                console.log(res); 
                                this.esc()
                                this.ACsetlist()

                            })
                    }
                }
            })

        },
        // 重置
        resize() {
            this.form = {
                title: '',
                img: '',
                status: ''
            }
            this.$refs.formName.resetFields();
            this.fileList=[]
        },
        // 修改的打开对话框
        lookup(id) {
            // 数据回显

            bannerinfo({
                id
            })
                .then(res => {
                    // console.log(res,'回显');
                    this.form = res.list
                    this.form.id = id
                    if(res.list.img!=''){
                         this.fileList = [{ url:'http://localhost:3070'+ res.list.img }]
                    }
                    // console.log(this.form,'回显');
                })
        },

        // 上传图片组件
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.form.img = ''
            this.fileList=[]
        },
        handlePictureCardPreview(file) {
            console.log(file.url,'urlllllllllllllllll');
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        changeFile(file, filelist) {
            console.log(file, filelist, "change");
            this.form.img = file.raw;
            console.log(this.form);
        },
    },
    components: {
    },
}
</script>

<style scoped>
</style>
